<!--
 * @Description:
 * @version:
 * @Author: 潘骏杰
 * @Date: 2022-03-31 11:19:15
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 10:55:01

-->
<template>
  <div>
    <Loading v-if="loading" />
    <div v-else class="back-white">
      <header>
        <van-icon
          name="bars"
          size="0.75rem"
          class="icon-fleft"
          @click="show = true"
        />
        <van-search
          v-model="searchvalue"
          shape="round"
          class="input-right"
          placeholder="搜索居民/服务等"
          maxlength="215"
        />
      </header>
      <div class="padding-lr10 ov-h">
        <div class="tx-fleft">
          <!-- 男女头像区分 -->
          <img
            v-if="personMsg.sex === '1'"
            src="@/assets/images/icon/girl.png"
            class="tx"
          >
          <img
            v-if="personMsg.sex === '0'"
            src="@/assets/images/icon/boy.png"
            class="tx"
          >
        </div>
        <div class="right-person-msg">
          <van-col span="12">
            <h2>
              {{
                $dayjs()
                  .startOf("day")
                  .valueOf() +
                  12 * 60 * 60 * 1000 -
                  // eslint-disable-next-line vue/no-parsing-error
                  new Date().valueOf() <
                  0
                  ? "下午"
                  : "上午"
              }}好，{{ personMsg.name }}{{ personMsg.job }}
            </h2>
            <div class="time gray-9">
              <div class="date">{{ $dayjs(today).format("DD") }}</div>
              <div class="right-m">
                <p>{{ weekDays[$dayjs(today).day()] }}</p>
                <p>{{ $dayjs(today).format("MM") }}月</p>
              </div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="crl text-center">
              <h1>1475</h1>
              <p>您的签约用户</p>
            </div>
          </van-col>
          <van-col span="6">
            <div class="crl text-center">
              <h1>8649</h1>
              <p>您的随访量</p>
            </div>
          </van-col>
        </div>
      </div>
      <div class="card ov-h text-center">
        <van-col span="6" @click="gopush('/familyDoctorSigning')">
          <div class="img">
            <img src="@/assets/images/icon/familyDoctorSigning.png">
          </div>
          <div class="black size-t">家医签约</div>
        </van-col>
        <van-col span="6">
          <div class="img">
            <img src="@/assets/images/icon/appointment.png">
          </div>
          <div class="black size-t">预约挂号</div>
        </van-col>
        <van-col span="6" @click="gopush('/archivesAdministration')">
          <div class="img">
            <img src="@/assets/images/icon/archives.png">
          </div>
          <div class="black size-t">档案管理</div>
        </van-col>
        <van-col span="6">
          <div class="img">
            <img src="@/assets/images/icon/history.png" alt="">
          </div>
          <div class="black size-t">预约记录</div>
        </van-col>
      </div>

      <!-- <NoData /> -->
    </div>
    <div class="clear-both backrow" />
    <div class="back-white padding-lr10 ov-h" style="padding-top: 20px">
      <!-- 此处是2个tab  lt black 没选择  bt为选择-->
      <!-- 点击切换高亮 -->
      <div :class="index === 1 ? 'bt mr' : 'lt mr'" @click="select(1)">
        15日任务
      </div>
      <div :class="index === 2 ? 'bt mr' : 'lt mr'" @click="select(2)">
        全部任务
      </div>
      <div>
        <van-tabs v-model="active" color="#4A90E2">
          <!-- 签约任务模块抽离成组件Home中 -->
          <Qian-Yue :qianyue-list="qianyueList" @getSon="getSonFn" />
          <van-tab title="履约任务">内容 2</van-tab>
          <!-- <van-tab title="糖尿病随访">内容 3</van-tab> -->
          <tang-niao-bing @getSon="getSonFn" @changepush="getChangepush" />
          <van-tab title="高血压随访">内容 4</van-tab>
          <van-tab title="严重精随访">内容 4</van-tab>
        </van-tabs>
      </div>
    </div>

    <van-popup
      v-model="show"
      :style="{ height: '100%', width: '40%' }"
      position="left"
      safe-area-inset-top="true"
    >
      <LeftNav />
    </van-popup>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Loading from '@/components/loading'
import LeftNav from '@/components/leftNav/index'
import QianYue from '@/views/home/QianYue'
import TangNiaoBing from '@/views/home/TangNiaoBing'

// import NoData from "@/components/nodata/Index";
export default {
  name: 'Home',
  // import引入的组件需要注入到对象中才能使用
  components: {
    Loading,
    LeftNav,
    // NoData,
    QianYue,
    TangNiaoBing
  },
  data() {
    // 这里存放数据
    return {
      show: false,
      loading: true,
      searchvalue: '',
      personMsg: {
        sex: '1', // 性别
        name: '张三', // 姓名
        job: '医生' // 职位
      },
      today: null,
      weekDays: [
        '周日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ],
      active: '签约任务',
      index: 2,
      // 签约组件数据
      qianyueList: [
        {
          type: '0',
          status: 'wait',
          title: '意向签约用户',
          time: '3天前',
          name: '李世民',
          sex: '1',
          address: '新吴区新安街道82hao202室'
        },
        {
          type: '1',
          status: 'finished',
          title: '签约申请',
          time: '3小时前',
          name: '西施',
          sex: '0',
          address: '梁溪区新安街道82hao202室'
        },
        {
          type: '2',
          status: 'finished',
          title: '可续约用户提醒',
          time: '3小时前',
          name: '武松',
          sex: '1',
          address: '黄浦区xxxxx宝山校区98耗1101一层楼'
        }

      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    onClickTab(title) {
      // 切换tab函数
      console.log(title)
    },
    gopush(path) {
      this.$router.push({ path })
    },
    // 给span添加点击事件并切换高亮
    select(i) {
      this.index = i
    },
    getSonFn(title) {
      console.log(title)
      if (title === '意向签约用户') {
        this.$router.push('/IntentSigning')
      }
      if (title === '签约申请') {
        this.$router.push('/DetailsOfContractedServices')
      }
    },
    getChangepush(type) {
      if (type === '0') {
        console.log(123)
        this.$router.push('/followUptask')
      }
      if (type === '1') {
        console.log(456)
        this.$router.push('/NewVisit')
      }
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
// * {
//   box-sizing: border-box;
// }
/deep/ .van-tab--active {
  color: #4a90e2 !important;
}
/deep/ .van-tab {
  width: 96px;
  height: 33px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 33px;
}
.address {
  width: 55%;
  display: inline-block;
  position: relative;
  top: 4px;
  font-size: 12px;
}
.img img {
  width: 40px;
}

.ov-h {
  margin-bottom: 15px;
}
.listImg {
  position: relative;
}
.waitFinshed,
.hasFinshed {
  position: relative;
  top: -10px;
}
.listImg img {
  width: 50px;
}
.active {
  color: #4a90e2 !important;
}
</style>
